/*
 * @Description: 描述信息
 * @Version: 版本号
 * @Author: xuebao
 * @Date: 2023-12-14 10:35:03
 * @LastEditors: xuebao
 * @LastEditTime: 2023-12-14 12:03:37
 */
import api from '@/api/orderApi'
import { Order } from '@/types/api'
import { IModalProp } from '@/types/modal'
import { message } from '@/utils/AntdGlobal'
import { Modal, Form, Row, Col, Select, Input, DatePicker } from 'antd'

import { useEffect, useImperativeHandle, useState } from 'react'

export default function CreateOrder(props: IModalProp) {
  const [visible, setVisible] = useState(false)
  const [cityList, setCityList] = useState<Order.DictItem[]>([])
  const [vehicleList, setVehicleList] = useState<Order.DictItem[]>([])
  const [form] = Form.useForm()
  useEffect(() => {
    getInitData()
  }, [])
  useImperativeHandle(props.mRef, () => {
    return {
      open,
    }
  })
  //打开弹框
  const open = () => {
    setVisible(true)
  }
  //初始化城市列表&车型列表
  const getInitData = async () => {
    const cityList = await api.getCityList()
    const vehicleList = await api.getVehicleList()
    setCityList(cityList)
    setVehicleList(vehicleList)
    props.update() //更新父组件
  }
  //创建订单提交
  const handleOk = async () => {
    const valid = await form.validateFields()
    if (valid) {
      await api.createOrder(form.getFieldsValue())
      message.success('创建成功')
      handleCancel()
    }
  }
  //取消
  const handleCancel = () => {
    form.resetFields() //重置表单
    setVisible(false)
  }

  return (
    <Modal
      title='创建订单'
      width={800}
      okText='确定'
      cancelText='取消'
      onOk={handleOk}
      onCancel={handleCancel}
      open={visible}
    >
      <Form form={form} labelAlign='right' layout='horizontal' labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
        <Row>
          <Col span={12}>
            <Form.Item label='城市名称' name='cityName' rules={[{ required: true, message: '请选择城市名称' }]}>
              <Select placeholder='请选择城市名称'>
                {cityList.map((item) => (
                  <Select.Option key={item.id} value={item.name}>
                    {item.name}
                  </Select.Option>
                ))}
              </Select>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label='车型名称' name='vehicleName' rules={[{ required: true, message: '请选择车型' }]}>
              <Select placeholder='请选择车型名称'>
                {vehicleList.map((item) => (
                  <Select.Option key={item.id} value={item.name}>
                    {item.name}
                  </Select.Option>
                ))}
              </Select>
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <Form.Item label='用户名称' name='userName' rules={[{ required: true, message: '请输入用户名称' }]}>
              <Input placeholder='请输入用户名称' />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label='手机号' name='mobile'>
              <Input placeholder='请输入下单手机号' />
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <Form.Item label='起始地址' name='startAddress'>
              <Input placeholder='请输入起始地址' />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label='结束地址' name='endAddress'>
              <Input placeholder='请输入结束地址' />
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <Form.Item label='下单金额' name='orderAmount' rules={[{ required: true, message: '请输入下单金额' }]}>
              <Input placeholder='请输入下单金额' type='number' />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label='支付金额' name='payAmount' rules={[{ required: true, message: '请输入支付金额' }]}>
              <Input placeholder='请输入支付金额' type='number' />
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <Form.Item label='司机名称' name='driverName' rules={[{ required: true, message: '请输入司机金额' }]}>
              <Input placeholder='请输入司机金额' />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label='司机金额' name='driverAmount' rules={[{ required: true, message: '输入司机金额' }]}>
              <Input type='number' placeholder='请输入司机金额' />
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <Form.Item label='支付方式' name='payType'>
              <Select placeholder='请选择支付方式'>
                <Select.Option value={1}>微信</Select.Option>
                <Select.Option value={2}>支付宝</Select.Option>
              </Select>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label='订单状态' name='state'>
              <Select placeholder='请选择订单状态'>
                <Select.Option value={1}>进行中</Select.Option>
                <Select.Option value={2}>已完成</Select.Option>
                <Select.Option value={3}>超时</Select.Option>
                <Select.Option value={4}>取消</Select.Option>
              </Select>
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <Form.Item label='用车时间' name='useTime'>
              <DatePicker placeholder='用车时间' />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label='结束时间' name='endTime'>
              <DatePicker placeholder='结束时间' />
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </Modal>
  )
}
